<template>
  <div class="news">
    <!-- 导航区 -->
    <ul>
      <li v-for="(news, index) in newsList" :key="index">
        <!--第一种  to 字符串写法 -->
        <!-- <RouterLink :to="`/news/detail/${news.id}/${news.title}/${news.content}`">{{ news.title }}</RouterLink> -->
        <!-- 第二种 to 对象写法 -->
        <RouterLink :to="{
          // path:'/news.detail',   //报错  params传参 不能用组件路径传参，只能用组件的name属性传参
          name: 'xiangqing',   //params传参 不能用组件路径传参，只能用组件的name属性传参
          params: {
            id: news.id,   //必传
            title: news.title,  //可传可不传
            content: news.content,  //必传
            // content:{},      //报错 params 只能接收简单类型的参数 必能穿对象和数组
            // content:[1,2,3,4]    //params 只能接收简单类型的参数 必能穿对象和数组
          }
        }">{{ news.title }}</RouterLink>
        <!-- 注意点： 在字符串写法中， 因为params在router.js里对参数进行占位了，假如某个子路由接收3个参数，
         其中第一个和第三个为必传参数，第二个为可传可不传参数，如果传参的时候传了1、2个参数，
         把第三个参数漏掉了，路由会默认为你传的是第1、3两个参数，为了避免这种情况，在传第二个
         参数的时候先用占位符把第二个参数占位，这样后续发现问题的时候方便维护
         -->
         <!--  假设必传参数content漏了，但是会路由会把传过去的title当做content了 -->
        <!-- <RouterLink :to="`/news/detail/${news.id}/${news.title}`">{{ news.title }}</RouterLink> -->
         <!-- 正确做法 -->
          <!-- <RouterLink :to="`/news/detail/${news.id}/_/${news.title}`">{{ news.title }}</RouterLink> -->
      </li>
    </ul>
    <!-- 展示区 -->
    <div class="news-content">
      <RouterView />
    </div>
  </div>
</template>

<script setup lang="ts" name="News">
import { reactive } from 'vue'
import { RouterView, RouterLink } from "vue-router";
let newsList = reactive([
  {
    id: 'YeNanManJian001',
    title: '如何一夜暴富',
    content: '上黑马学IT，月薪过万',
  },
  {
    id: 'YeNanManJian002',
    title: '震惊，万万没想到',
    content: '明天是周一',
  },
  {
    id: 'YeNanManJian003',
    title: '很好的抗癌实物',
    content: '西蓝花',
  },
  {
    id: 'YeNanManJian004',
    title: '好消息！好消息！',
    content: '快过年了',
  },
])
</script>

<style scoped>
/* 新闻 */
.news {
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  height: 100%;
}

.news ul {
  margin-top: 30px;
  list-style: none;
  padding-left: 10px;
}

.news li>a {
  font-size: 18px;
  line-height: 40px;
  text-decoration: none;
  color: #64967E;
  text-shadow: 0 0 1px rgb(0, 84, 0);
}

.news-content {
  width: 70%;
  height: 90%;
  border: 1px solid;
  margin-top: 20px;
  border-radius: 10px;
}
</style>
